<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="public, max-age=3600">
    <meta http-equiv="Pragma" content="public">
    <meta http-equiv="Expires" content="3600">
    <title>账户信息查询</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .fade-in { animation: fadeIn 0.5s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .content-section { transition: all 0.3s ease-in-out; }
        .content-section.hidden { opacity: 0; visibility: hidden; position: absolute; }
        .content-section.active { opacity: 1; visibility: visible; position: static; }
        .positive { color: #28a745; }
        .negative { color: #dc3545; }
        .nav-link.active { background-color: #0d6efd; color: white !important; }
        .loading { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; }
        html, body { height: 100%; margin: 0; padding: 0; }
        .container-fluid { height: 100%; display: flex; flex-direction: column; }
        .row { flex: 1; display: flex; }
        .sidebar { height: 100%; }
        main { flex: 1; overflow-y: auto; }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse">
                <div class="position-sticky pt-3">
                    <div class="sidebar-header mb-4">
                        <h3 class="text-center text-light">TQSDK</h3>
                        <p class="text-center text-light">账户查询系统</p>
                    </div>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="#home-section">
                                <i class="bi bi-house-door me-2"></i>
                                首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#account-section">
                                <i class="bi bi-wallet2 me-2"></i>
                                账户资金
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#positions-section">
                                <i class="bi bi-graph-up me-2"></i>
                                持仓信息
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#settings-section">
                                <i class="bi bi-gear me-2"></i>
                                设置
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 主内容区 -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">TQSDK 账户查询系统</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="btn-group me-2">
                            <button type="button" id="refreshBtn" class="btn btn-sm btn-outline-secondary">
                                <i class="bi bi-arrow-clockwise"></i> 刷新数据
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 登录表单 -->
                <div id="home-section" class="card mb-4 content-section">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">账户登录</h5>
                    </div>
                    <div class="card-body">
                        <form id="accountForm">
                            <div class="row mb-3">
                                <div class="col-md-5">
                                    <label for="username" class="form-label">用户名</label>
                                    <input type="text" class="form-control" id="username" placeholder="输入TQSDK用户名">
                                </div>
                                <div class="col-md-5">
                                    <label for="password" class="form-label">密码</label>
                                    <input type="password" class="form-control" id="password" placeholder="输入TQSDK密码">
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="submit" class="btn btn-primary w-100">查询</button>
                                </div>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="useDefault">
                                <label class="form-check-label" for="useDefault">
                                    使用默认凭据
                                </label>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 加载指示器 -->
                <div id="loading" class="text-center my-5 d-none">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="mt-2">正在查询账户信息，请稍候...</p>
                </div>

                <!-- 错误提示 -->
                <div id="error-alert" class="alert alert-danger d-none" role="alert">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                    <span id="error-message">查询失败</span>
                </div>

                <!-- 账户资金信息 -->
                <div id="account-section" class="card mb-4 d-none content-section">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">账户资金信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <div class="card h-100 border-primary">
                                    <div class="card-body text-center">
                                        <h6 class="card-title text-muted">可用资金</h6>
                                        <h3 class="card-text" id="available">--</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="card h-100 border-success">
                                    <div class="card-body text-center">
                                        <h6 class="card-title text-muted">账户权益</h6>
                                        <h3 class="card-text" id="balance">--</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="card h-100 border-warning">
                                    <div class="card-body text-center">
                                        <h6 class="card-title text-muted">占用保证金</h6>
                                        <h3 class="card-text" id="margin">--</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="card h-100 border-danger">
                                    <div class="card-body text-center">
                                        <h6 class="card-title text-muted">风险度</h6>
                                        <h3 class="card-text" id="risk-ratio">--</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-4 mb-3">
                                <div class="card h-100">
                                    <div class="card-body text-center">
                                        <h6 class="card-title text-muted">昨日账户权益</h6>
                                        <h4 class="card-text" id="pre-balance">--</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="card h-100">
                                    <div class="card-body text-center">
                                        <h6 class="card-title text-muted">浮动盈亏</h6>
                                        <h4 class="card-text" id="float-profit">--</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <div class="card h-100">
                                    <div class="card-body text-center">
                                        <h6 class="card-title text-muted">平仓盈亏</h6>
                                        <h4 class="card-text" id="close-profit">--</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 持仓信息 -->
                <div id="positions-section" class="card mb-4 d-none content-section">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">持仓信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>合约</th>
                                        <th>多头持仓</th>
                                        <th>空头持仓</th>
                                        <th>今日多开</th>
                                        <th>今日空开</th>
                                        <th>多头盈亏</th>
                                        <th>空头盈亏</th>
                                        <th>多头均价</th>
                                        <th>空头均价</th>
                                    </tr>
                                </thead>
                                <tbody id="positions-table-body">
                                    <!-- 持仓数据将通过JavaScript动态添加 -->
                                </tbody>
                            </table>
                        </div>
                        <div id="no-positions" class="alert alert-warning d-none" role="alert">
                            <i class="bi bi-info-circle me-2"></i>
                            当前账户没有持仓
                        </div>
                    </div>
                </div>

                <!-- 设置部分 -->
                <div id="settings-section" class="card mb-4 d-none content-section">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">设置</h5>
                    </div>
                    <div class="card-body">
                        <form id="settingsForm">
                            <div class="mb-3">
                                <label for="apiUrl" class="form-label">API地址</label>
                                <input type="text" class="form-control" id="apiUrl" value="http://127.0.0.1:8000/api/account">
                            </div>
                            <div class="mb-3">
                                <label for="refreshInterval" class="form-label">自动刷新间隔（秒）</label>
                                <input type="number" class="form-control" id="refreshInterval" min="5" value="30">
                            </div>
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" id="autoRefresh">
                                <label class="form-check-label" for="autoRefresh">启用自动刷新</label>
                            </div>
                            <button type="submit" class="btn btn-primary">保存设置</button>
                        </form>
                    </div>
                </div>

                <footer class="pt-3 mt-4 text-muted border-top">
                    &copy; 2025 TQSDK 账户查询系统
                </footer>
            </main>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/app.js?v=1.1"></script>
</body>
</html>